<template>
  <view class="customer">
    <view class="px-24rpx">
      <view class="flex justify-between">
        <view class="block-style size-338rpx px-24rpx py-14rpx">
          <view class="mb-12rpx flex items-center justify-between">
            <view class="text-center" @click="routerToResumeList">
              <image class="mb-8rpx h-128rpx w-128rpx" :src="home08" />
              <view class="text-20rpx color-#4E5969 leading-30rpx">
                更新简历
              </view>
            </view>
            <view class="text-center" @click="goMore">
              <image class="mb-8rpx h-128rpx w-128rpx" :src="home15" />
              <view class="text-20rpx color-#4E5969 leading-30rpx">
                更多
              </view>
            </view>
          </view>
          <view class="mb-29rpx h-2rpx w-full bg-#e8e8e8" />
          <view class="flex items-center">
            <view class="mr-20rpx">
              <view class="mb-2rpx flex items-center">
                <image class="mr-6rpx h-50rpx w-50rpx b-2rpx b-#ccc rounded-full b-solid" :src="home06" />
                <image class="border-1rpx-#ccc h-38rpx w-38rpx b-2rpx b-#ccc rounded-full b-solid" :src="home06" />
              </view>
              <view class="flex justify-center pl-10rpx">
                <image class="border-1rpx-#ccc h-30rpx w-30rpx b-2rpx b-#ccc rounded-full b-solid" :src="home06" />
              </view>
            </view>
            <view class="text-26rpx color-#1d2129 font-medium leading-44rpx"
              @click="jump('/pages/common/opportunity/index')">
              机会来了
            </view>
          </view>
        </view>
        <view class="flex flex-col justify-between">
          <view class="block-style h-140rpx w-338rpx flex items-center justify-between px-48rpx">
            <image class="mb-8rpx h-80rpx w-80rpx" :src="home13" />
            <image class="mb-8rpx h-80rpx w-80rpx" :src="home12"
              @click="jump('/pages/common/delivery-progress/index')" />
          </view>
          <view class="flex items-center justify-between px-44rpx">
            <view class="text-20rpx color-#4e5969 leading-30rpx">
              最近沟通
            </view>
            <view class="text-20rpx color-#4e5969 leading-30rpx" @click="jump('/pages/common/delivery-progress/index')">
              投递进度
            </view>
          </view>
          <view class="block-style h-140rpx w-338rpx flex items-center pl-44rpx">
            <image class="mb-8rpx mr-34rpx h-60rpx w-60rpx" :src="home06" />
            <view @click="jump('/pages/common/interested/index')">
              <view class="mb-6rpx text-34rpx color-#1d2129 font-700 leading-40rpx">
                {{likeCount}}
              </view>
              <view class="text-20rpx color-#a8a8a8 leading-28rpx">
                感兴趣职位
              </view>
            </view>
          </view>
        </view>
      </view>
      <up-gap height="30rpx" />
      <view class="block-style h-218rpx w-full flex justify-between px-36rpx py-24rpx text-center">
        <navigator v-for="(item, index) in resourceType" :key="index" :url="item.url" hover-class="none">
          <up-image width="128rpx" height="128rpx" :src="item.src" />
          <view class="mt-8rpx leading-30rpx">
            {{ item.text }}
          </view>
        </navigator>
      </view>
    </view>
    <up-gap height="30rpx" />
    <view class="w-full rounded-t-40rpx bg-#fff pt-20rpx">
      <view class="px-40rpx">
        <up-tabs :list="jobTitleList" line-color="transparent" :active-style="{
            color: '#1664FF',
            fontSize: '30rpx',
            transform: 'scale(1.05)',
          }" :inactive-style="{
            color: '#4e5968',
            fontSize: '26rpx',
            transform: 'scale(1)',
          }" item-style="padding:0 25rpx 5px; line-height: 36rpx;" @click="tabChange" />
      </view>
      <up-gap height="30rpx" />
      <view class="bg-#f6f7f8">
        <view v-for="(item, index) in jobList" :key="index" class="job-item mb-32rpx bg-#fff px-40rpx py-24rpx">
          <view class="mb-14rpx flex items-center justify-between" @click="jumpDetail(item.job_id)">
            <view class="text-left text-[32rpx] text-[#1d2129]">
              {{ item.job_name }}
            </view>
            <view class="text-[30rpx] text-[#1f50f2] font-semibold tracking-[-0.3rpx]">
              {{item.salary_min}}k-{{item.salary_max}}k·{{item.salary_count}}薪
            </view>
          </view>
          <view class="mb-24rpx flex items-center text-left text-[26rpx] text-[#6e6d72]"
            @click="jumpDetail(item.job_id)">
            <view>{{item.province}}·{{item.city}}</view>
            <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
            <view>{{item.job_nature}}</view>
            <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
            <view>{{item.qualifications}}</view>
          </view>
          <view class="mb-20rpx flex items-center justify-between b-b b-b-#f6f7f8 b-b-solid pb-18rpx">
            <view class="flex items-center" @click="jumpDetail(item.job_id)">
              <view class="mr-10rpx bg-#fcf8e9 px-8rpx color-#f57100 leading-42rpx"
                v-for="highlight in item.highlights">
                {{highlight}}
              </view>
            </view>
            <image class="h-60rpx w-60rpx" :src="item.like_img"
              @click="onclickUserLike(index, item.job_id, item.like)" />
          </view>
          <view class="flex items-center text-[26rpx] text-[#4e5968]" hover-class="none">
            <view class="flex items-center pt-10rpx" @click="jumpCompanyDetail(item.company_id)">
              <image class="mr-12rpx h-36rpx w-36rpx rounded-full" :src="item.company_logo" />
              <view>{{item.company_name}}</view>
              <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
              <view>{{item.company_type}}</view>
              <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
              <view>{{item.company_listed}}</view>
            </view>
          </view>
          <view class="flex items-center justify-between text-[26rpx] text-[#4e5968]" @click="jumpHrDetail(item.hr_id)">
            <view class="flex items-center pt-10rpx">
              <image class="mr-12rpx h-36rpx w-36rpx rounded-full" :src="item.hr_avatar" />
              <view>{{item.hr_name}}·{{item.hr_duty}}</view>
            </view>
            <up-button :custom-style="{
                'width': '144rpx',
                'height': '58rpx',
                'background': '#1f50f2',
                'border-radius': '60rpx',
                'font-size': '24rpx',
                'color': '#ffffff',
                'margin': '0',
              }">
              立即沟通
            </up-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  // import home01 from '@/static/images/tab/home-01.png';
  // import home06 from '@/static/images/tab/home-06.png';
  // import home08 from '@/static/images/tab/home-08.png';
  // import home10 from '@/static/images/tab/home-10.png';
  // import home12 from '@/static/images/tab/home-12.png';
  // import home13 from '@/static/images/tab/home-13.png';
  // import home15 from '@/static/images/tab/home-15.png';
  // import home16 from '@/static/images/tab/home-16.png';
  // import home17 from '@/static/images/tab/home-17.png';
  // import home18 from '@/static/images/tab/home-18.png';
  // import home19 from '@/static/images/tab/home-19.png';
  import { userUserInfo, userJobInteractionUpdate, userJobInteractionList, getTimDataApi } from '@/api/user'
  import { customerJobList, userTalkING, userTalkNew, userTalkLike } from '@/api/user/customer';
  import { commonGetJobType, userChat } from '@/api/user/common';
  const home01 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-01.png';
  const home06 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-06.png';
  const home08 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-08.png';
  const home10 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-10.png';
  const home12 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-12.png';
  const home13 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-13.png';
  const home15 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-15.png';
  const home16 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-16.png';
  const home17 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-17.png';
  const home18 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-18.png';
  const home19 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-19.png';
  const resourceType = ref([
    {
      src: home16,
      text: '搜专业',
      url: '/pages/common/search/work-type',
    },
    {
      src: home17,
      text: '搜企业',
      url: '/pages/common/search/index',
    },
    {
      src: home18,
      text: '求职活动',
      url: '/pages/common/myactive/index',
    },
    {
      src: home19,
      text: '就业直播',
      url: '/pages/tab/living/index',
    },
  ]);

  const onclickUserLike = async (index : number, job_id : number, like : number) => {
    console.log('修改职位互动type:::', index, ' job_id:::', job_id, ' like:::', like);

    const result = await userJobInteractionUpdate({
      like: like == 1 ? 0 : 1,
      job_id: job_id,
    });
    console.log('修改职位互动result:::', result);
    jobList[index].like_img = like == 1 ? home10 : home06;
    jobList[index].like = like == 1 ? 0 : 1;
  }

  const jobTitleList : any = reactive([{
    id: 0,
    name: '全部'
  }]);

  const jobList : any = reactive([]);

  const goMore = () => {
    uni.navigateTo({
      url: '/pages/tab/home/more'
    });
  }
  const routerToResumeList = () => {
    uni.navigateTo({
      url: '/pages/userinfo/resume'
    });
  };
  const jumpDetail = (position_id : number) => {
    uni.navigateTo({
      url: '/pages/common/position-detail/index?job_id=' + position_id
    });

  }
  const jumpHrDetail = (hr_user_id : number) => {
    uni.navigateTo({
      url: '/pages/common/hr-detail/index?hr_user_id=' + hr_user_id
    });
  }
  const jumpCompanyDetail = (company_id : number) => {
    uni.navigateTo({
      url: '/pages/common/company/index?company_id=' + company_id
    });
  }
  const jump = (url) => {
    uni.navigateTo({
      url
    });
  }
  const goChat = async (item) => {
    let res = await getTimDataApi({ id: item })
    console.log('item', item);
    console.log('res:::::', res);
  };

  async function getJobType() {
    let r = await commonGetJobType("首页")
    r.titleList.forEach(item => {
      jobTitleList.push(item);
    });
  }

  const likeCount = ref(0);

  async function getJobList(position_id : number = 0) {
    jobList.splice(0, jobList.length);
    let params : any = {
      status: 1
    }
    if (position_id > 0) {
      params['position_id'] = position_id
    }
    let r = await customerJobList(params, "首页")
    if (!r) {
      uni.showToast({ title: '获取职位列表失败', icon: 'none' })
      return
    }
    //赋值
    r.jobList.forEach(item => {
      jobList.push(item);
    })
  }
  const userInfo : any = ref({})
  async function getUserInfo() {
    let r = await userUserInfo();
    console.log('首页-用户信息(加缓存后需要删除):::', r);
    userInfo.value = r;
  }

  async function getJobInterationList() {
    let result = await userJobInteractionList({ like: 1 });
    console.log('感兴趣的职位 res list:::', result);
    //vue3传递result的值到子组件JobList中的属性jobList中
    if (!!result && result.count) {
      likeCount.value = result.count
    }
  }

  onLoad(() => {
    getJobType();
    getUserInfo();
    getJobList(0);
    getJobInterationList();

  });

  onShow(() => {
  })

  function tabChange(item) {
    getJobList(item.id)
  }
</script>

<script lang="ts">
  export default {
    options: {
      styleIsolation: 'shared',
    },
  };
</script>

<style lang="scss" scoped>
  .block-style {
    background: #fff;
    border-radius: 44rpx;
    box-shadow: 0 6rpx 16rpx 0 rgb(191 191 191 / 26%);
  }

  .job-item:last-of-type {
    margin-bottom: 0;
  }

  .customer {
    ::v-deep(.u-tabs) {
      .u-tabs__wrapper__nav__line {
        background: transparent !important;

        &::before {
          @apply content-[""] absolute left-0 top-0 w-[120rpx] h-[8rpx] opacity-50 translate-x-[-20px] rounded-full;

          background: linear-gradient(90deg,
              #1f69fb 3%,
              rgb(83 178 252 / 0%) 98%);
        }
      }
    }
  }
</style>
